<template>
  <div>
    <div class="vux-demo">
      <img class="logo" src="../assets/vux_logo.png" />
      <p>{{ city }}:{{ ip }}</p>
      <h1></h1>
    </div>
    <group title="Demo">
      <cell title="scroller" link="/scrollerMain"></cell>
      <cell title="betterScroller" link="/betterScroller"></cell>
      <cell title="selectPerson" link="/selectPerson"></cell>
      <cell title="selectPersonOrg" link="/selectPersonOrg"></cell>
      <cell title="checklistpopover" link="/checklistpopover"></cell>
      <cell title="testPopover" link="/testPopover"></cell>
    </group>
  </div>
</template>

<script>
import { Group, Cell } from "vux";
import getUserIp from "../common/userIP.js";
export default {
  components: {
    Group,
    Cell
  },
  data() {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: "Hello World!",
      ip: "",
      city: ""
    };
  },
  methods: {
    goReq() {
      this.$router.push("/req");
    }
  },
  mounted() {
    getUserIp()
      .then(res => {
        this.ip = res.cip;
        this.city = res.cname;
        console.log(res);
      })
      .catch(e => {
        console.log(e);
      });
  }
};
</script>

<style>
.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px;
}
</style>
